<template>
  <div>
 <loading :isShow="showLoading"></loading>
<city-header></city-header>
<city-search :cities="cities"></city-search>
<city-list :letter="letter"
           :cities="cities"
           :hot="hotCities"></city-list>
<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>
<script type="text/ecmascript-6">
  //vuex规则
  //1.state就是放公用数据的地方
  //2.想改变vuex
  //3.如果有异步操作或者复杂的批量操作就放入actions，组件先调用actions接着调用mutations
  //4.mutations存放的是同步操作
  //5.components操作actions使用dispatch
  //6.actions或者components操作mutations使用commit
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import axios from 'axios'
import Loading from '../loading'
export default{
  name:'City',
  components:{
    'city-header':CityHeader,
    'city-search':CitySearch,
    'city-list':CityList,
    'city-alphabet':CityAlphabet,
    'loading': Loading
  },
  mounted: function(){
    this.getCityInfo();
  },
  methods:{
    getCityInfo(){
      axios.get('/api/city.json').then(this.handleGetCityInfoSucc);
    },
    handleLetterChange:function(letter){
      this.letter = letter;
    },
    handleGetCityInfoSucc:function(res){
      res = res.data;
      if(res.ret && res.data){
        this.showLoading = false;
        var data = res.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
      }
    }
  },
  data:function(){
    return {
      showLoading:true,
      cities:{},
      hotCities:[],
      letter:''
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>
